<template>
  <div class="excel-export">
    <el-button type="primary" @click="handleDownload" style="margin-bottom: 20px;">导出</el-button>
    <div class="tableData" id="tableReport">
      <el-table :data="tableData" border ref="tableReport">
        <el-table-column prop="index" label="序号" align="center" width="90" />
        <el-table-column prop="index" label="公司" align="center" />
        <el-table-column prop="index" label="项目" align="center" />
        <el-table-column prop="index" label="战场" align="center" />
        <el-table-column :label="item" align="center" v-for="(item, index) in showItems" :key="index">
          <el-table-column prop="index" :label="`${num}月`" align="center" v-for="num in 12" :key="num" />
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  name: 'excel-export',
  data() {
    return {
      tableData: [
        { index: 1 },
        { index: 2 },
      ],
      showItems: ['生产物料', '燃油', '设备辅油', '车辆设备辅油', '工具', '其他']
    }
  },
  methods: {
    handleDownload() {
      // 最简单方法，但导出样式有点小问题，比如表头内容过多被隐藏了
      // let elt = document.getElementById("tableReport")
      const $e = this.$refs['tableReport'].$el
      let $table = $e.querySelector('.el-table__fixed')
      if (!$table) {
        $table = $e
      }
      const wb = XLSX.utils.table_to_book($table, { raw: true })
      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      FileSaver.saveAs(
        new Blob([wbout], { type: 'application/octet-stream' }),
        `原辅料报表11.xlsx`,
      )
    }
  }
}
</script>

<style scoped lang="scss"></style>
